import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { getDevice } from '../../action/map.action'
// import DeviceChart from '../../component/chart/custom'
import DeviceChart from '../device/device'
import { h3c } from './config/deviceId'
import Icon from 'rc-ui/lib/Icon'
const Path = Icon.Path

class Device extends PureComponent {
    componentDidMount () {
        const {dispatch} = this.props
        /*获取设备列表*/
        dispatch(getDevice())
    }

    /*点击设备回调*/
    openDetail = () => {

    }

    shouldComponentUpdate (nextProps) {
        return this.props.deviceList !== nextProps.deviceList
    }

    /**
     * @param smt smt产线
     * @param deviceId 设备id
     * @return object 对应的设备详细信息
     * */
    getDeviceInfo = (smt, deviceId) => {
        const {deviceList} = this.props
        const data = deviceList.toJS()
        return data[smt].filter(d => d.deviceId === deviceId)[0] || {}
    }

    render () {
        const {deviceList} = this.props
        const data = deviceList.toJS()
        /*smt一线*/
        /*smt二线*/
        const {smt1, smt2} = h3c
        /*过滤出smt一线、smt二线*/
        const deviceArray = Object.keys(data)
            .map(key => data[key])
            .reduce((a, b) => a.concat(b))
            .filter(device => [...smt1, ...smt2].filter(smtDevice => device.deviceId === smtDevice.deviceId).length)

        /*统计设备运行状态*/
        const runData = {
            on: deviceArray.filter(d => d.status === 'on', 0).length,
            off: deviceArray.filter(d => d.status === 'off', 0).length,
            error: deviceArray.filter(d => d.status === 'error', 0).length
        }

        /*smt一线设备数据*/
        const smt1Data = smt1.map(c => {
            return {...this.getDeviceInfo('SMT一线', c.deviceId), ...c}
        })

        /*smt二线设备数据*/
        const smt2Data = smt2.map(c => {
            return {...this.getDeviceInfo('SMT二线', c.deviceId), ...c}
        })
        return (
            <div className="index-device-container">
                {/*设备*/}
                <div className="index-device-chart-box">
                    <div style={{width: '100%', height: '50%'}}>
                        <DeviceChart types={smt1Data} openDetail={this.openDetail}/>

                    </div>
                    <div style={{width: '100%', height: '50%'}}>
                        <DeviceChart types={smt2Data} openDetail={this.openDetail}/>
                    </div>
                </div>

                {/*设备运行状态*/}
                <div className="index-device-chart-icon">
                    <div className="run-icon-container">
                        <span style={{color: 'rgb(0, 183, 151)'}}>正常运行：{runData.on}台</span>
                    </div>
                    <div className="run-icon-container">
                        <span style={{color: 'rgb(209, 63, 73)'}}>机器故障：{runData.error}台</span>
                    </div>
                    <div className="run-icon-container">
                        <span style={{color:'rgb(170, 170, 170)'}}>机器关机：{runData.off}台</span>
                    </div>
                    <div className="run-icon-container">
                        <span style={{color:'rgb(231, 219, 121)'}}>工艺超标：{runData.off}台</span>
                    </div>
                </div>
            </div>
        )
    }

}

function mapStoreToProps ({deviceList}) {
    return {
        deviceList
    }
}

export default connect(mapStoreToProps)(Device)